<template>
	<view class="container">
		<!-- 项目基本信息 -->
		<view class="project-header">
			<view class="header-info">
				<text class="customer-name">{{ project.customer }}</text>
				<text class="project-status" :class="project.status">{{ getStatusText(project.status) }}</text>
			</view>
			<text class="total-amount">¥{{ project.totalAmount }}</text>
		</view>

		<!-- 项目详情 -->
		<view class="detail-section">
			<text class="section-title">项目详情</text>
			<view class="detail-item">
				<text class="detail-label">联系电话</text>
				<text class="detail-value">{{ project.phone }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">小区名称</text>
				<text class="detail-value">{{ project.community }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">房间信息</text>
				<text class="detail-value">{{ project.room }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">创建时间</text>
				<text class="detail-value">{{ formatDate(project.createTime) }}</text>
			</view>
			<view class="detail-item" v-if="project.updateTime">
				<text class="detail-label">更新时间</text>
				<text class="detail-value">{{ formatDate(project.updateTime) }}</text>
			</view>
		</view>

		<!-- 装修项目列表 -->
		<view class="detail-section">
			<text class="section-title">装修项目</text>
			<view class="project-items">
				<view v-for="(item, index) in project.items" :key="index" class="project-item">
					<view class="item-header">
						<text class="item-type">{{ getProjectTypeName(item.typeIndex) }}</text>
						<text class="item-amount">¥{{ item.amount }}</text>
					</view>
					<text class="item-remark" v-if="item.remark">{{ item.remark }}</text>
				</view>
			</view>
		</view>

		<!-- 备注信息 -->
		<view class="detail-section" v-if="project.remark">
			<text class="section-title">备注信息</text>
			<text class="remark-text">{{ project.remark }}</text>
		</view>

		<!-- 付款记录 -->
		<view class="detail-section">
			<view class="section-header">
				<text class="section-title">付款记录</text>
				<button class="add-payment-btn" @click="addPayment">添加付款</button>
			</view>
			<view class="payment-list" v-if="payments.length > 0">
				<view v-for="payment in payments" :key="payment.id" class="payment-item">
					<view class="payment-info">
						<text class="payment-amount">¥{{ payment.amount }}</text>
						<text class="payment-time">{{ formatDate(payment.paymentTime) }}</text>
					</view>
					<view class="payment-status">
						<text class="status-text" :class="payment.status">{{ getPaymentStatusText(payment.status) }}</text>
						<text class="payment-remark" v-if="payment.remark">{{ payment.remark }}</text>
					</view>
				</view>
			</view>
			<view class="empty-payments" v-else>
				<text class="empty-text">暂无付款记录</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-section">
			<button class="action-btn edit-btn" @click="editProject">编辑项目</button>
			<button class="action-btn status-btn" @click="changeStatus">修改状态</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			projectId: '',
			project: {},
			payments: []
		}
	},
	onLoad(options) {
		if (options.id) {
			this.projectId = options.id
			this.loadProject()
			this.loadPayments()
		}
	},
	onShow() {
		this.loadProject()
		this.loadPayments()
	},
	methods: {
		loadProject() {
			const projects = uni.getStorageSync('engineering_projects') || []
			const project = projects.find(p => p.id === this.projectId)
			if (project) {
				this.project = project
			} else {
				uni.showToast({
					title: '项目不存在',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},
		loadPayments() {
			const allPayments = uni.getStorageSync('project_payments') || []
			this.payments = allPayments
				.filter(payment => payment.projectId === this.projectId)
				.sort((a, b) => new Date(b.paymentTime) - new Date(a.paymentTime))
		},
		getStatusText(status) {
			const statusMap = {
				'unpaid': '未付款',
				'partial': '部分付款',
				'paid': '已结清'
			}
			return statusMap[status] || '未知'
		},
		getPaymentStatusText(status) {
			const statusMap = {
				'unpaid': '未付款',
				'partial': '部分付款',
				'paid': '已结清'
			}
			return statusMap[status] || '未知'
		},
		getProjectTypeName(typeIndex) {
			const projectTypes = [
				'天花板装修',
				'墙壁装修',
				'卫生间装修',
				'厨房装修',
				'地板装修',
				'门窗装修',
				'水电安装',
				'其他项目'
			]
			return projectTypes[typeIndex] || '未知类型'
		},
		formatDate(dateString) {
			const date = new Date(dateString)
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
		},
		addPayment() {
			// 计算已付款总额
			const totalPaid = this.payments.reduce((sum, p) => sum + p.amount, 0)
			const remainingAmount = this.project.totalAmount - totalPaid
			
			if (remainingAmount <= 0) {
				uni.showToast({
					title: '该项目已全部结清',
					icon: 'none'
				})
				return
			}
			
			uni.showModal({
				title: '添加付款记录',
				content: '请输入付款金额',
				editable: true,
				placeholderText: `最大可输入 ¥${remainingAmount.toFixed(2)}`,
				success: (res) => {
					if (res.confirm && res.content) {
						const amount = parseFloat(res.content)
						if (isNaN(amount) || amount <= 0) {
							uni.showToast({
								title: '请输入有效金额',
								icon: 'none'
							})
							return
						}
						
						if (amount > remainingAmount) {
							uni.showToast({
								title: `金额不能超过 ¥${remainingAmount.toFixed(2)}`,
								icon: 'none'
							})
							return
						}
						
						// 计算付款状态
						const newTotalPaid = totalPaid + amount
						const status = newTotalPaid >= this.project.totalAmount ? 'paid' : 'partial'
						
						// 添加付款记录
						const payment = {
							id: Date.now().toString(),
							projectId: this.projectId,
							projectName: `${this.project.customer} - ${this.project.community}`,
							amount: amount,
							status: status,
							paymentTime: new Date().toISOString(),
							remark: '手动添加付款'
						}
						
						const payments = uni.getStorageSync('project_payments') || []
						payments.push(payment)
						uni.setStorageSync('project_payments', payments)
						
						// 更新项目状态
						this.updateProjectStatus(status)
						
						this.loadPayments()
						
						uni.showToast({
							title: '付款记录添加成功',
							icon: 'success'
						})
					}
				}
			})
		},
		updateProjectStatus(status) {
			const projects = uni.getStorageSync('engineering_projects') || []
			const projectIndex = projects.findIndex(p => p.id === this.projectId)
			
			if (projectIndex !== -1) {
				projects[projectIndex].status = status
				projects[projectIndex].updateTime = new Date().toISOString()
				uni.setStorageSync('engineering_projects', projects)
				this.loadProject()
			}
		},
		changeStatus() {
			const statusOptions = [
				{ text: '未付款', value: 'unpaid' },
				{ text: '部分付款', value: 'partial' },
				{ text: '已结清', value: 'paid' }
			]
			
			uni.showActionSheet({
				itemList: statusOptions.map(option => option.text),
				success: (res) => {
					const newStatus = statusOptions[res.tapIndex].value
					this.updateProjectStatus(newStatus)
					
					uni.showToast({
						title: '状态更新成功',
						icon: 'success'
					})
				}
			})
		},
		editProject() {
			uni.navigateTo({
				url: `/pages/add/add?id=${this.projectId}`
			})
		}
	}
}
</script>

<style scoped>
.container {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.project-header {
	background: white;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.header-info {
	flex: 1;
}

.customer-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.project-status {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: white;
}

.project-status.unpaid {
	background: #ff4757;
}

.project-status.partial {
	background: #ffa502;
}

.project-status.paid {
	background: #2ed573;
}

.total-amount {
	font-size: 48rpx;
	font-weight: bold;
	color: #667eea;
}

.detail-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: block;
}

.section-header .section-title {
	margin-bottom: 0;
}

.add-payment-btn {
	padding: 12rpx 24rpx;
	background: #667eea;
	color: white;
	border: none;
	border-radius: 8rpx;
	font-size: 24rpx;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.detail-item:last-child {
	border-bottom: none;
}

.detail-label {
	font-size: 28rpx;
	color: #666;
}

.detail-value {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.project-items {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.project-item {
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.item-type {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.item-amount {
	font-size: 28rpx;
	color: #667eea;
	font-weight: bold;
}

.item-remark {
	font-size: 24rpx;
	color: #666;
}

.remark-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

.payment-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.payment-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
}

.payment-info {
	text-align: left;
}

.payment-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #4CAF50;
	display: block;
	margin-bottom: 5rpx;
}

.payment-time {
	font-size: 24rpx;
	color: #666;
}

.payment-status {
	text-align: right;
}

.status-text {
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	color: white;
	display: block;
	margin-bottom: 5rpx;
}

.status-text.unpaid {
	background: #ff4757;
}

.status-text.partial {
	background: #ffa502;
}

.status-text.paid {
	background: #2ed573;
}

.payment-remark {
	font-size: 22rpx;
	color: #666;
}

.empty-payments {
	text-align: center;
	padding: 60rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.action-section {
	display: flex;
	gap: 20rpx;
	padding: 40rpx 0;
}

.action-btn {
	flex: 1;
	padding: 30rpx;
	border: none;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-weight: bold;
}

.edit-btn {
	background: #667eea;
	color: white;
}

.status-btn {
	background: #ffa502;
	color: white;
}
</style>
